<template>
	<u-modal
		:value="visible"
		confirm-text="关闭"
		:mask-close-able="true"
		:show-cancel-button="false"
		:title-style="{ display: 'none' }"
		:confirm-style="{ height: '80rpx', lineHeight: '80rpx' }"
		@confirm="confirmClick"
	>
		<view class="contentCon">
			<scroll-view scroll-y="true" class="scrollCon">
				<u-table>
					<u-tr>
						<u-th>产品型号</u-th>
						<u-th>颜色</u-th>
						<u-th>机身码</u-th>
					</u-tr>
					<u-tr v-for="item in list" :key="item.id">
						<u-td>
							<text class="modalText">{{ item.model }}</text>
						</u-td>
						<u-td>
							<text class="modalText">{{ item.color }}</text>
						</u-td>
						<u-td>
							<text class="modalText">{{ item.code }}</text>
						</u-td>
					</u-tr>
				</u-table>
			</scroll-view>
		</view>
	</u-modal>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {};
	},
	methods: {
		confirmClick() {
			this.$emit('close-modal');
		}
	}
};
</script>

<style lang="less">
.contentCon {
	padding: 12rpx;
}
.scrollCon {
	height: 800rpx;
}
u-td,
u-th {
	width: 33%;
}
.modalText {
	word-break: break-all;
}
</style>
